fix(fox): improve ecosystem icon consistency and header spacing - #12516
Conversation
|
Warning Review limit reached
Next review available in: 43 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe header now uses a 1540px media query for search visibility and a scroll-aware backdrop pseudo-element. Fox farming and governance headings now use Chakra icons instead of emojis. ChangesUI polish
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/Layout/Header/Header.tsx (1)
89-94: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMemoize the responsive display objects.
searchBoxDisplayandiconButtonDisplayare recreated on everyHeaderrender. Wrap them inuseMemowith empty dependency arrays, or move them to stable module-level constants.Proposed fix
- const searchBoxDisplay = { - base: 'none', - '3xl': 'flex', - } + const searchBoxDisplay = useMemo( + () => ({ + base: 'none', + '3xl': 'flex', + }), + [], + ) - const iconButtonDisplay = { - base: 'flex', - '3xl': 'none', - } + const iconButtonDisplay = useMemo( + () => ({ + base: 'flex', + '3xl': 'none', + }), + [], + )As per coding guidelines, TSX object and array creations must use
useMemo.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Layout/Header/Header.tsx` around lines 89 - 94, Stabilize the responsive display objects searchBoxDisplay and iconButtonDisplay in Header by wrapping each in useMemo with empty dependency arrays, or by moving them to module-level constants. Preserve their existing display mappings and ensure the chosen approach avoids recreating these objects on every render.Source: Coding guidelines
src/pages/Fox/components/FoxFarming.tsx (1)
75-75: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse UPPER_SNAKE_CASE for both module-level icon constants.
src/pages/Fox/components/FoxFarming.tsx#L75-L75: renamefarmingIcontoFARMING_ICONand update Line 308.src/pages/Fox/components/FoxGovernance.tsx#L56-L56: renamegovernanceIcontoGOVERNANCE_ICONand update Line 124.As per coding guidelines, use UPPER_SNAKE_CASE for constants and configuration values.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Fox/components/FoxFarming.tsx` at line 75, Rename the module-level icon constants to UPPER_SNAKE_CASE: update farmingIcon to FARMING_ICON in src/pages/Fox/components/FoxFarming.tsx and its usage at line 308, and update governanceIcon to GOVERNANCE_ICON in src/pages/Fox/components/FoxGovernance.tsx and its usage at line 124.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/Layout/Header/Header.tsx`:
- Around line 89-94: Stabilize the responsive display objects searchBoxDisplay
and iconButtonDisplay in Header by wrapping each in useMemo with empty
dependency arrays, or by moving them to module-level constants. Preserve their
existing display mappings and ensure the chosen approach avoids recreating these
objects on every render.
In `@src/pages/Fox/components/FoxFarming.tsx`:
- Line 75: Rename the module-level icon constants to UPPER_SNAKE_CASE: update
farmingIcon to FARMING_ICON in src/pages/Fox/components/FoxFarming.tsx and its
usage at line 308, and update governanceIcon to GOVERNANCE_ICON in
src/pages/Fox/components/FoxGovernance.tsx and its usage at line 124.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: a581fb83-a4bf-42d5-99a1-e440e2ffa081
📒 Files selected for processing (3)
src/components/Layout/Header/Header.tsxsrc/pages/Fox/components/FoxFarming.tsxsrc/pages/Fox/components/FoxGovernance.tsx
TbBuildingBank's glyph sits low in its viewBox (y=6-21 of 24), so the box-centered icon rendered ~2px below the heading text center; nudge it up to compensate. TbPlant2 is already centered and needs no offset. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Hiding the bar until 3xl (2200px) removed it for all 1080p displays. The bar genuinely fits once each flex=1 side section clears its content width (~1540px); no theme breakpoint sits near that point, so gate the full/icon variants on a raw media query and give the bar a static 300px width instead of min/max clamps whose responsive keys were inert. Also remove the unreachable sub-lg fallback inside GlobalSearchButton: the full-bar variant has never rendered below 1440px, so its internal below-992px icon switch was dead code. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The sticky header floats 8px below the viewport top with side gutters, so scrolling content was visible through the surrounding gap. Add an always-opaque backdrop pseudo-element (body background color, so it is invisible at rest) extending past the header on top and sides, with a full-width bottom hairline that activates instantly on scroll. The pill's own conditional background, border, radius and transitions are superseded by the mask and removed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Pushed three commits onto this branch while testing it locally — summary of what changed and why: f34b413 — fox icons: renamed the icon constants to camelCase to match the existing pattern ( 2707e3b — search breakpoint: moving the full search bar to 4c589ea — header scroll gap: while testing we noticed page content showing through the 8px gap above/beside the floating header when scrolling (most visible on content-dense pages like fox-ecosystem). Added an always-opaque backdrop pseudo-element in the body background color (invisible at rest, zero-lag since no JS is involved) with a full-width bottom hairline that activates on scroll. This supersedes the pill's conditional background/border, which are removed. Tested across the 1540px boundary, at 1920, and 2560, plus fast-scroll on the fox-ecosystem page. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/Layout/Header/Header.tsx (1)
56-58: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winApply the constant naming and explicit-type rules.
fullSearchMediaQuery,searchBoxSx, andiconButtonSxare module-level configuration values. Rename them toFULL_SEARCH_MEDIA_QUERY,SEARCH_BOX_SX, andICON_BUTTON_SX. Add explicit types for the new style objects, includingbackdropSx. Verify the selected Chakra style type against@chakra-ui/react@2.10.7.As per coding guidelines, use UPPER_SNAKE_CASE for constants and configuration values and explicit types for TypeScript object shapes.
Also applies to: 96-109
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Layout/Header/Header.tsx` around lines 56 - 58, Rename the module-level configuration values fullSearchMediaQuery, searchBoxSx, and iconButtonSx to FULL_SEARCH_MEDIA_QUERY, SEARCH_BOX_SX, and ICON_BUTTON_SX, updating all references including the indicated later usage. Add explicit Chakra-compatible style types to SEARCH_BOX_SX, ICON_BUTTON_SX, and backdropSx, verifying the type against `@chakra-ui/react` 2.10.7.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Layout/Header/Header.tsx`:
- Around line 92-96: Update the header scroll-threshold logic around isScrolled
and height so height is measured after the header ref mounts and refreshed when
the header size or viewport changes, rather than memoized from an initial null
ref. Keep isScrolled comparing the current scroll position against the measured
header height.
---
Nitpick comments:
In `@src/components/Layout/Header/Header.tsx`:
- Around line 56-58: Rename the module-level configuration values
fullSearchMediaQuery, searchBoxSx, and iconButtonSx to FULL_SEARCH_MEDIA_QUERY,
SEARCH_BOX_SX, and ICON_BUTTON_SX, updating all references including the
indicated later usage. Add explicit Chakra-compatible style types to
SEARCH_BOX_SX, ICON_BUTTON_SX, and backdropSx, verifying the type against
`@chakra-ui/react` 2.10.7.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: b7d31602-b5a4-43d3-8d28-baa8a1506d08
📒 Files selected for processing (3)
src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsxsrc/components/Layout/Header/Header.tsxsrc/pages/Fox/components/FoxGovernance.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/Fox/components/FoxGovernance.tsx
The height was memoized from a null ref during the initial render, so it was always 0 and the threshold was already effectively any-scroll. Make that explicit and remove the dead ref plumbing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@coderabbitai The naming/typing nitpick is skipped intentionally: this file's existing module-level constants ( |
|
Tip For best results, initiate chat on the files or code changes.
✏️ Learnings added
You are interacting with an AI system. |
2 participants
Description
3xldisplays and use the compact search action below that breakpointIssue (if applicable)
N/A
Risk
Low. These changes are isolated to presentational icons on the FOX ecosystem page and the responsive display breakpoint of the existing global search controls.
None. No protocol, transaction, wallet, or contract behavior is changed.
Testing
Engineering
pnpm run dev:web:localhost./#/fox-ecosystem.Quality gates completed:
pnpm run lint --fix(passes with pre-existing warnings only)pnpm run type-checkOperations
In a preview environment, open the FOX ecosystem page and verify that the Farming and Governance section icons share a consistent visual style. Resize the browser around the 2200px breakpoint and confirm that the search control never covers the Ecosystem navigation item.
Screenshots (if applicable)
N/A
Summary by CodeRabbit